
<script setup lang="ts">
// import TheWelcome from '../components/TheWelcome.vue'
import useCountDown from '@/components/useCountDown';
import AMapLoader from '@amap/amap-jsapi-loader';

import { onMounted, onUnmounted, ref } from 'vue'
const isAdShowIng = ref<boolean>(false);
const cbTimeFun = () => {
    console.log('计时结束')
    isAdShowIng.value = false;
}
const { time, start, } = useCountDown(5, cbTimeFun);
// onMounted(() => {
//     // 初始化计时器
//     start();
//     isAdShowIng.value = true;
// })

let map = null;

console.log('import.meta.env.MODE', import.meta.env.MODE, import.meta.env)
onMounted(() => {
    AMapLoader.load({
        key: "6da7f6bcca8b8764be5c189b6c66abd4", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        console.log('AMap', AMap)
        map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
        // 创建点覆盖物
        // var marker = new AMap.Marker({
        //     position: new AMap.LngLat(116.2925, 40.04),
        //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        //     offset: new AMap.Pixel(-13, -30)
        // });
        // map.add(marker);
        // 获取用户当前定位
        const options = {
            'showButton': true,//是否显示定位按钮
            'position': 'LB',//定位按钮的位置
            /* LT LB RT RB */
            'offset': [10, 20],//定位按钮距离对应角落的距离
            'showMarker': true,//是否显示定位点
            'markerOptions': {//自定义定位点样式，同Marker的Options
                'offset': new AMap.Pixel(-18, -36),
                'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
            },
            'showCircle': true,//是否显示定位精度圈
            'circleOptions': { // 定位精度圈的样式
                'strokeColor': '#0093FF',
                'noSelect': true,
                'strokeOpacity': 0.5,
                'strokeWeight': 1,
                'fillColor': '#02B0FF',
                'fillOpacity': 0.25
            }
        }
        // 获取当前位置 定位插件
        AMap.plugin('AMap.Geolocation', function () {
            const geolocation = new AMap.Geolocation(options);
            // 添加定位实例 能自动把地图视口定位到当前所在位置
            map.addControl(geolocation);
            // 获取当前位置的方法
            geolocation.getCurrentPosition();
            console.log('geolocation', geolocation, AMap)
            AMap.Event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.Event.addListener(geolocation, 'error', onError);      //返回定位出错信息

            function onComplete(data) {
                // data是具体的定位信息
                console.log('data', data)
                const { position: { kT, KL } } = data;
                // 设置地图中心点
                // map.setCenter([KL, kT])
                // 设置覆盖物位置
                // marker.setPosition([KL, kT])
                // console.log(kT,KL)
            }

            function onError(data) {
                // 定位出错
                console.log('error data', data)
            }
        });

    })
        .catch((e) => {
            console.log(e);
        });
})

onUnmounted(() => {
    map?.destroy();
});
</script>

<template>
    <main>

        <div v-if="isAdShowIng">
            <p>{{ time }}s</p>
            我是广告
        </div>
        <div id="container"></div>

        <van-search v-model="value" placeholder="请输入搜索关键词" />


        <!-- <button @click="()=>{start()}">开时计时</button> -->
    </main>
</template>

<style >
html,
body,
#app,
main {
    height: 100%;
}

#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: calc(100% - 300px);
}</style>
